Customizing Tables

This topic provides principles and examples for customizing tables in a form.

Selectors for Table Elements

Fields in tables are not fundamentally different from other fields, apart from the format of their ids. While standalone fields have IDs of the format FieldFieldNumber, tables have IDs of the format FieldNumber(RowNumber). Every field in the same column has the same Number. The RowNumbers start from 1 and increase by 1 for each row. Suppose I want to target the entry that is in the third row, in the column with entry IDs starting with Field19. The ID for this field would be Field19(3). The following screenshot shows how you can find out what Number and RowNumber using Chrome's Developer Tools.

Viewing the HTML corresponding to a cell in a table.

Iterating over Table Rows

In jQuery, you can iterate over all elements that satisfy a certain condition by using the $('selector').each() function. To specify the elements to iterate over, you would first use a selector, then append .each to the end of the selector. In the following screenshot, we can see that the table is within a li element with class cf-table-block. The rows are specified within the body of the table, that is, within the tbody element. In this element, each row is represented by its own tr element. All tables have the class cf-table-block. If you want to implement a customization on a specific table, and you have more than one table on your form, you should assign a custom class to that table, then use that class' name in place of cf-table-block.

The HTML li element corresponding to an entire table.

As an example, we show you how to color each row in a table depending on the radio button selection in that row. It shows you how the .each function may be used.

Coloring rows based on radio button selection

This JavaScript snippet causes a table row to be colored gray when "choice 1" is selected, and white when it is not.

$(document).ready(function () {
  
  rowcolorchange();
  
  $('.RadioTable').on('change','[type="radio"]', rowcolorchange);
  
  function rowcolorchange() {
    $('.RadioTable tbody tr').each(function () {
      $(this).find('input:checked').each(function () {
        if ($(this).val() == "choice 1"){
          $(this).closest('tr').css("background-color", "#cccccc");
        }else{
          $(this).closest('tr').css("background-color", "#ffffff");
        }
      });
    });
  }
  
});

The central piece of the code is the function rowcolorchange. This function uses the .each iterator to iterate over all elements that are within an element of class RadioTable, within a tbody element, and within a tr element. The custom class RadioTable should be assigned to your table in the form designer for this code to work.

Within each row, the program searches for an input element that is selected. If that element has the value "choice 1", the row is assigned a gray background color. Otherwise, the row is assigned a white background color. The .closest function ensures that the program searches for the closest tr element that is an ancestor of the input area, and colors that the appropriate color.

When the code runs successfully, the table should look like this:

Table where the rows are colored according to which radio button us selected in one column.

Color Odd Rows of Table

The following JavaScript snippet assigns a non-white color to all odd-numbered rows in a table. It works for both tables with a fixed number of rows and tables where the user can append additional rows. It requires you to first assign the class rowcolortable to the table.

In a table, each row is represented by a tr element. The function altColor assigns the color #ff0000 (red) to all "odd" tr elements, meaning the first element, third element, fifth element, and so on. It also assigns the color #ffffff (the default white) to all "even" tr elements.

The rest of the code specifies the events that cause altColor to be called. When the document is loaded, altColor is called immediately, to color any existing table rows. When the user clicks on the button that adds a new row, altColor is called again, to color any new rows added. This button is identified by its class, cf-table-add-row. When the user clicks on the button that removes a row, altColor is called. This button is identified by the class form-del-field.

$(document).ready(function() {
  
  altColor();

  $('.rowcolortable').on('click', '.form-del-field', function () {
    altColor();
  });
  
  $('.rowcolortable').on('click', '.cf-table-add-row', function () {
    altColor();
  });
  
  function altColor() {
    $("tr:odd").css("background-color", "#ff0000");
    $("tr:even").css("background-color", "#ffffff");
  }
});

An example of what a table colored this way looks like:

A table where the odd rows are colored red and the even rows are the default white.

Dynamically Create Table Rows

When you create a table, you can set it to have a variable number of rows and have users click an "Add" button to add more rows. However, sometimes you may want to add a number of rows that depends on a variable that is specified elsewhere on the form. The following sample shows you how to do this with JavaScript. A certain integer is specified on a form field (in a real-world scenario, this is something that may be derived from a formula based on other fields), and the JavaScript automatically ensures that the table has a number of rows equal to that integer.

The expected behavior of the form can be seen in the following animation. After a number of days is entered in one field, the table adjusts to have the same number of rows as the number of days specified. This happens once the user moves away from the "Number of Days" field.

The JavaScript used for this was the following:

$(document).ready(function(){
  $('.numberDays input').change(function(){ 
    var rowNumber = $(this).val();
    $('.myTable .form-del-field').trigger('click');
    for (i=0; i<rowNumber; i++){
      $('.myTable .cf-table-add-row').trigger('click');
    }
  })
});